<template>
  <div class="Transaction_2">
    <div class="Transaction_4">输入交易密码</div>
    <div class="Transaction_1">
      <div class="Transaction_3">
        <div class="Transaction_5">
          投资金额：<span>{{ amount }}元</span>
        </div>
        <div class="Transaction_6">
          交易密码：
          <input
            type="password"
            placeholder="请输入交易密码"
            class="Transaction_inp"
            v-model="password"
          />
        </div>
        <div class="Transaction_7">
          手机验证码：

          <input
            type="text"
            placeholder="短信验证码"
            class="Transaction_inp2"
            v-model="verification"
          />
           <button
                @click.prevent="getShortMessageCode()"
                :class="{code_btn1:ppt,code_btn11:!ppt}"
                :disabled="!show"
              >
                <span v-show="show" @click="Transaction_button2">获取验证码</span>
                <span v-show="!show">{{ count }} 秒后可重发</span>
              </button>
        </div>
        <div class="Transaction_8">
          
          <button class="Transaction_button" @click="Transaction_button3">
            确定
          </button>
        </div>
      </div>
    </div>
    <Bottom />
  </div>
</template>

<script>
import Bottom from "../finance/Bottom.vue";
import axios from "axios";

export default {
  data() {
    return {
      propertyId: null,
      amount: null, //投资金额
      show: true,
      timer: 0,
      count: 0,
      ppt: true, //点击时改变样式
      verification: null, //验证码
      password: null, //交易密码
      benefits: null, //获利金

     
    };
  },
  components: {
    Bottom,
  },
  methods: {
   
    Transaction_button3() {
      axios({
        url: "api/withdraw/getSave",
        method: "post",
        params: {
          propertyId: this.propertyId,
          price: this.amount,
          userPwd: this.password,
          code: this.verification,
        },
      }).then((res) => {
        if (res.data != "投资成功") {
          // alert(res.data);
          this.$message.error(res.data);
          return;
        }
        this.$router.push({
          path: "Success",
          query: { benefits: this.benefits },
        });
      });
    },
    Transaction_button2() {
      axios({
        url: "api/user/smsverification",
        method: "get",
      });
    },
    getSignInformation4() {
      this.propertyId = this.$route.query.propertyId;
      this.amount = this.$route.query.amount;
      this.benefits = this.$route.query.benefits;
    },
    // 获取短信验证码
    getShortMessageCode() {
      this.ppt = !this.ppt;
      //axios请求
      // console.log(this.form.phone);
      console.log(1111111111111);
      console.log(!this.timer);
      // 验证码倒计时
      if (!this.timer) {
        console.log(this.timer);
        this.count = 60;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= 60) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
            this.ppt = !this.ppt;
          }
        }, 1000);
      }
    },
  },
  created() {
    this.getSignInformation4();
    
  },
};
</script>

<style>
.el-message {
  height: 50px !important;
  top: 75% !important;
  margin-top: -500px !important;
  z-index: 100000002 !important;
}
.Transaction_button {
  width: 250px;
  height: 50px;
  background-color: red;
  border: 1px solid red;
  color: white;
  font-size: 150%;
    cursor: pointer;

}
.Transaction_inp {
  width: 200px;
  height: 30px;
}
.Transaction_inp2 {
  width: 100px;
  height: 33px;
}
.Transaction_5 {
  float: left;
  width: 100%;
  margin-top: 30px;
  color: #999999;
}
.Transaction_6 {
  float: left;
  width: 100%;
  margin-top: 30px;
  color: #999999;
}
.Transaction_7 {
  float: left;
  width: 100%;
  margin-top: 30px;
  color: #999999;
}
.Transaction_8 {
  float: left;
  width: 100%;
  margin-top: 30px;
  color: #999999;
}
.code_btn1 {
  height: 37px;
  background-color: red;
  color: white;
  border: 1px solid red;
  background-color: red;
  -webkit-border-radius: 5px;
}
.code_btn11 {
  height: 37px;
  background-color: red;
  color: white;
  border: 1px solid #cccccc;
  background-color: #cccccc;
  -webkit-border-radius: 5px;
}
.Transaction_4 {
  width: 80%;
  float: left;
  height: 80px;
  margin-left: 10%;
  margin-top: 100px;
  font-size: 150%;
  line-height: 100px;
  border-bottom: 3px solid red;
}
.Transaction_3 {
  width: 80%;
  float: left;
  margin-left: 20%;
  height: 90%;
  margin-top: 20px;
  /* background-color: red; */
}
.Transaction_1 {
  width: 80%;
  float: left;
  height: 500px;
  margin-left: 10%;

  margin-bottom: 150px;
  background-color: #fffde7;
}
.Transaction_2 {
  float: left;
  background-color: #f6f6f6;
  width: 100%;
  height: 100%;
}
</style>